<template>
  <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
  >
    <template #title>
      <van-row justify="center">
        <van-button id="leftBtn" :color="leftBtnColor" type="primary" size="small" @click="leftChangeBtn">
          <template #default>
            <span ref="leftBtnFont" style="color: #00AEEF">找人</span>
          </template>
        </van-button>
        <van-button id="rightBtn" :color="rightBtnColor" type="primary" size="small" @click="rightChangeBtn">
          <template #default>
            <span ref="rightBtnFont" style="color: #FFFFFF">找群</span>
          </template>
        </van-button>
      </van-row>
    </template>
  </van-nav-bar>
  <van-search
      v-model="searchUsername"
      shape="round"
      clearable
      @blur="onSearch"
      background="#F2F2F2"
      :placeholder="searchPlaceholder"
      input-align="center"
  />
  <van-card
      v-for="(item, index) in searchUserResult" :key="item"
      :title="item.userNickname"
      :thumb="item.userHeadImg"
      @click="selectedUser(index)"
  >
  </van-card>
  <van-action-sheet @select="addToFriend" :actions="actions" cancel-text="取消" v-model:show="show" title="是否添加Ta为好友" />
</template>

<script>
import {Toast} from "vant";
import {searchUser} from "@/api/user";
import {router} from "@/router";

export default {
  name: "search",
  data() {
    return {
      searchPlaceholder: "用户名",
      leftBtnColor: '#FFFFFF',
      rightBtnColor: '#00AEEF',
      searchUsername: '',
      page: 1,
      searchUserResult: [],
      show: false,
      actions: [
        {name: '添加', subname: '', color: '#00AEEF',},
      ],
      selectedUserInfo: {}
    }
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    leftChangeBtn() {
      this.searchPlaceholder = "用户名"
      this.leftBtnColor = '#FFFFFF'
      this.$refs.leftBtnFont.style.cssText = 'color: #00AEEF'

      this.rightBtnColor = '#00AEEF'
      this.$refs.rightBtnFont.style.cssText = 'color: #FFFFFF'
    },
    rightChangeBtn() {
      this.searchPlaceholder = "群号/群名"
      this.leftBtnColor = '#00AEEF'
      this.$refs.leftBtnFont.style.cssText = 'color: #FFFFFF'

      this.rightBtnColor = '#FFFFFF'
      this.$refs.rightBtnFont.style.cssText = 'color: #00AEEF'
    },
    onSearch() {
      if (this.searchUsername === null || this.searchUsername.trim().length <= 0) {
        return;
      }
      this.searchUserResult = []
      let searchData = {
        'username': this.searchUsername
      }
      Toast.loading({
        message: '搜索中...',
        forbidClick: true,
      });
      searchUser(searchData).then(response => {
        if (response.code === 200 && response.data !== null) {
          Toast(response.message)
          this.searchUserResult.push(...response.data)
          this.searchUsername = ''
        }
      })
    },
    selectedUser(userIndex) {
      this.selectedUserInfo = this.searchUserResult[userIndex]
      this.actions[0].subname = this.selectedUserInfo.userNickname
      this.show = true
    },
    addToFriend() {
      router.push({
        name: 'verify',
        params: {
          friendUserId: this.selectedUserInfo.userId
        }
      })
    }
  }
}
</script>


<style scoped>
.van-nav-bar {
  --van-nav-bar-background-color: rgb(0, 174, 239);
  --van-nav-bar-icon-color: rgb(0, 0, 0);
  --van-nav-bar-height: 75px;
}

.van-button {
  --van-button-round-border-radius: 50%
}

#leftBtn {
  margin-top: 27px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border: solid 10px white;
}

#rightBtn {
  margin-top: 27px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border: solid 10px white;
}

/deep/ .van-image {
  margin-top: 4px;
}

.van-card {
  --van-card-padding: 10px;
  --van-card-thumb-size: 45px;
  --van-card-thumb-magin-top: 10px;
  --van-card-thumb-border-radius: 50%;
  --van-card-font-size: 17px;
  --van-card-title-line-height: 30px;
  --van-card-price-color: #646566;
  --van-card-price-integer-font-size: 12px
}

.content {
  padding: 16px 16px 160px;
}
</style>